<template>
  <el-container>
    <el-header>
    </el-header>
    <el-main>
      <vxe-toolbar custom :refresh="{query: loadListData}">
        <template #buttons>
          <el-button size="small" type="primary" @click="formOperate('', 'add')">新增</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table ref="listTable" :data="listData" :size="elemSize" border round>
        <vxe-column field="menuName" title="菜单名称"/>
        <vxe-column field="routerComponent" title="组件路径"/>
        <vxe-column field="menuLink" title="菜单路径"/>
        <vxe-column title="操作">
          <!--          <template v-slot="scope">
                      <el-button type="text" :size="elemSize">查看</el-button>
                      <el-button type="text" :size="elemSize">修改</el-button>
                      <el-dropdown style="margin-left: 10px">
                        <el-link type="text" :size="elemSize"><i class="el-icon-arrow-down el-icon&#45;&#45;left"></i>更多</el-link>
                        <el-dropdown-menu>
                          <el-dropdown-item>
                            <el-button type="text">查看</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-button type="text" :size="elemSize">修改</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-button @click="delete(scope.row.id)" type="text" :size="elemSize">
                              删除
                            </el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>-->
          <template v-slot="scope">
            <div class="sys-menu-col-btn">
              <el-link type="primary" :underline="false"><i class="el-icon-view el-icon--left"></i>查看</el-link>
              <el-link type="primary" :underline="false" @click="formOperate(scope.row.id, 'edit')"><i class="el-icon-edit el-icon--left"></i>修改</el-link>
              <el-dropdown>
                <el-link type="primary" :underline="false"><i class="el-icon-arrow-down el-icon--left"></i>更多
                </el-link>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-link type="primary" :underline="false" @click="formOperate('', 'add', scope.row.id)">添加下级菜单</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-link @click="delete(scope.row.id)" type="danger" :underline="false">
                      删除
                    </el-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
      <sys-menu-form :visible.sync="formDialog.visible" :data-id="formDialog.dataId" :method="formDialog.method" :parent-id="formDialog.parentId"/>
    </el-main>
  </el-container>
</template>

<script>
import SysMenuForm from '@views/modules/system/menu/SysMenuForm.vue'

export default {
  name: 'SysMenuList',
  components: { SysMenuForm },
  mounted () {
    this.loadListData()
  },
  data () {
    return {
      elemSize: 'medium',
      loading: false,
      listData: [],
      formDialog: {
        visible: false,
        dataId: '',
        method: '',
        parentId: ''
      }
    }
  },
  methods: {
    loadListData () {
      this.$http.post('/sys/menu/findPage', {}).then(({ data }) => {
        this.listData = data.page
      })
    },
    formOperate (dataId, method, parentId) {
      this.formDialog.dataId = dataId
      this.formDialog.method = method
      this.formDialog.parentId = parentId
      this.formDialog.visible = true
    },
    delete (id) {
    }
  }
}
</script>

<style scoped lang="scss">
.sys-menu-col-btn > * {
  margin-right: 10px;
}
.sys-menu-col-btn > :last-child {
  margin-right: 0;
}
</style>
